<template>
  <div class="wrapper_spend">
    <div class="wrapper_project">
      <div class="title ">我的人力支出统计</div>
      <div id="bar1"></div>
      <div v-if="!dataLength" id="nodata">
        <img src="../../../img/img_01@3x.png" alt="" style="width:88px;height:58px;margin-top:50px">
        <div style="font-size:14px;margin-bottom:20px;padding-right:15px;margin-top:30px;color:#909399">暂无数据</div>
      </div>
    </div>
    <div class="wrapper_project">
      <div class="title ">我的人力支出进度</div>
      <div id="pie1" style="padding-top: 20px;">
        <el-row    type="flex" :gutter="2" justify="center" style="margin-top: 20px;margin-bottom:15px" v-for="(item,index) in myMandyProgressVOList" :key="index">
          <el-col :span="4" style="display: flex;align-items: center;font-size: 14px" >
            {{item.proName}}
          </el-col>
          <el-col :span="16">
            <el-progress :text-inside="true" :stroke-width="26" :percentage="item.num"></el-progress>
          </el-col>
        </el-row>
      </div>
      <div v-if="!myMandyProgressVOList.length" id="nodata">
        <img src="../../../img/img_01@3x.png" alt="" style="width:88px;height:58px;margin-top:50px">
        <div style="font-size:14px;margin-bottom:20px;padding-right:15px;margin-top:30px;color:#909399">暂无数据</div>
      </div>
    </div>
  </div>
</template>

<script>
    import { baseBarWidth } from '@/utils'
    const echarts = require('echarts')
    export default {
        data() {
            return {
                baseBarWidth
            }
        },
        props: {
            isPieShow: {
                type: Boolean,
                default: true
            },
            dataName:{
                type: Array,
                default:function () {
                    return []
                }
            },
            data :{
                type: Array,
                default:function () {
                    return []
                }
            },
            myMandyProgressVOList:{
                type: Array,
                default:function () {
                    return []
                }
            },
        },
        mounted() {
            this.generateSpendBar()
        },
        computed: {
          dataLength() {
            return this.data && this.data.length
          }
        },
        watch:{
            dataName:{
                handler(newName, oldName) {
                    this.generateSpendBar()
                    // console.log(this.myMandyProgressVOList)
                }
            }
        },

        methods: {
            /**
             * 生成人力支出柱状图
             */

            generateSpendBar() {
                // console.log(this.dataName,this.data,'my')
                const option = {
                    xAxis: {
                        type: 'category',
                        data: this.dataName,
                        axisLabel: {
                            interval:0,
                            rotate: -20,
                            formatter: function (name) {
                                    return (name.length > 10 ? (name.slice(0,10)+"...") : name );
                            },
                        },
                    },
                    color: ['#409EFF'], // 配置图例颜色

                    yAxis: {
                        type: 'value'
                    },
                    legend: {
                        data: ['按岗位统计'],
                        right: 20,
                        top: 20,
                        selectedMode: false
                    },
                    axisLabel : {//坐标轴刻度标签的相关设置。
                        formatter : function(params){
                            var newParamsName = "";// 最终拼接成的字符串
                            var paramsNameNumber = params.length;// 实际标签的个数
                            var provideNumber = 10;// 每行能显示的字的个数
                            var rowNumber = Math.ceil(paramsNameNumber / provideNumber);// 换行的话，需要显示几行，向上取整
                            /**
                             * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
                             */
                            // 条件等同于rowNumber>1
                            if (paramsNameNumber > provideNumber) {
                                /** 循环每一行,p表示行 */
                                for (var p = 0; p < rowNumber; p++) {
                                    var tempStr = "";// 表示每一次截取的字符串
                                    var start = p * provideNumber;// 开始截取的位置
                                    var end = start + provideNumber;// 结束截取的位置
                                    // 此处特殊处理最后一行的索引值
                                    if (p == rowNumber - 1) {
                                        // 最后一次不换行
                                        tempStr = params.substring(start, paramsNameNumber);
                                    } else {
                                        // 每一次拼接字符串并换行
                                        tempStr = params.substring(start, end) + "\n";
                                    }
                                    newParamsName += tempStr;// 最终拼成的字符串
                                }

                            } else {
                                // 将旧标签的值赋给新标签
                                newParamsName = params;
                            }
                            //将最终的字符串返回
                            return newParamsName
                        }

                    },
                    series: [{
                        data: this.data,
                        name: '按项目统计',
                        type: 'bar',
                        barWidth: this.baseBarWidth,
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true, // 开启显示
                                    position: 'top', // 在上方显示
                                    textStyle: { // 数值样式
                                        color: 'black',
                                        fontSize: 14
                                    }
                                }
                            }
                        }
                    }]
                }
                const myChart = echarts.init(document.getElementById('bar1'))
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option)
            },


        }
    }
</script>

<style lang="scss" scoped>
  .wrapper_spend{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    .wrapper_project{
      flex: 1;
      max-width: 49%;
      display: flex;
      flex-direction: column;
      margin-top: 20px;
      justify-content: space-between;
      position: relative;
      .title{
        // padding-left: 20px;
        margin-bottom: 20px;
      }
      #bar1, #pie1{
        width: 100%;
        height: 300px;
        background: white;

      }
      #pie1{
        overflow-y: scroll;
        overflow-x: hidden;
      }
      #nodata{
        width: 100%;
        height: 300px;
        background: white;
        position: absolute;
        top: 40px;
        left: 0;
        z-index: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 300px;
      }
    }
  }
  .defaultCircle{
    position: relative;
    &::before{
      position: absolute;
      content: '';
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #7F7F7F;
      top: 50%;
      left: 0;
      transform: translateY(-50%);
    }
  }
</style>
